<template>
  <div>
    <div id="components-form-demo-advanced-search" style="margin: 20px 10px">
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          处理批次号：<a-input
           :maxLength="128"
            v-model="searchData.batchNo"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          <div>
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getTabList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
          </div>
        </a-col>
        <a-col :span="6"> </a-col>
        <a-col :span="6"> </a-col>
      </a-row>
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-table
        :columns="columns"
        :data-source="tabData"
        :pagination="false"
        :scroll="{ x: 1200 }"
      >
        <span slot="days" slot-scope="text, record"> {{ record.days }}天 </span>
        <span slot="waybillCount" slot-scope="text, record">
          {{ record.waybillCount === null ? "暂无" : record.waybillCount }}
        </span>
        <span slot="putCount" slot-scope="text, record">
          {{ record.putCount === null ? "暂无" : record.putCount }}
        </span>
        <span slot="destructionCount" slot-scope="text, record">
          {{
            record.destructionCount === null ? "暂无" : record.destructionCount
          }}
        </span>
        <span slot="batchState" slot-scope="text, record">
          <span style="color: #3eae7c">
            {{ record.batchState === null ? "暂无" : record.batchState }}
          </span>
        </span>
        <span slot="backCount" slot-scope="text, record">
          {{ record.backCount === null ? "暂无" : record.backCount }}
        </span>
        <span slot="createTime" slot-scope="text, record">
          {{
            record.createTime === null
              ? "暂无"
              : record.createTime.replace("T", "  ")
          }}
        </span>
        <span slot="remark" slot-scope="text, record">
          {{ record.remark === null ? "暂无" : record.remark }}
        </span>
        <span slot="action" class="action" slot-scope="text, record">
          <!-- <a
          slot="action"
          style="color: #2929e0; border-bottom: 1px solid #2929e0"
          href="javascript:;"
          @click="onSubmitRow(record)"
          >提交</a
        > -->
          <!-- <a-divider
          type="vertical"
          v-if="
            record.batchState === '未加入运单' &&
            record.tenantId != null &&
            record.tenantId != ''
          "
        /> -->
          <a
            v-if="record.state != '26'"
            slot="action"
            style="color: #2929e0; border-bottom: 1px solid #2929e0"
            href="javascript:;"
            @click="costServiceInfo(record)"
            >服务项登记查看</a
          >
          <a-divider type="vertical" v-if="record.state != '26'" />
          <a
            slot="action"
            style="color: #2929e0; border-bottom: 1px solid #2929e0"
            href="javascript:;"
            @click="rowInfo(record)"
            >详细数据</a
          >
        </span>
      </a-table>
    </a-spin>
    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          :current="searchData.current"
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            total => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            props => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>

    <a-modal v-model="tabInfoVisible" title="详细数据" width="80%">
      <template slot="footer" class="modelBtn">
        <a-button
          @click="tabInfoVisible = false"
          style="background: #d7d7d7; color: #fff; border: none"
          >取消</a-button
        >
        <a-button
          v-if="tabRowState === '26'"
          :loading="loading"
          type="primary"
          @click="onSubmitRow()"
          >提交</a-button
        >
      </template>
      <a-table
        :data-source="tableListModal"
        :pagination="false"
        :scroll="{ x: 1280 }"
      >
        <!-- 物流商 -->
        <a-table-column
          key="logisticsName"
          data-index="logisticsName"
          align="center"
          width="10%"
        >
          <span slot="title"> 物流商</span>
          <template slot-scope="text, record">
            {{ record.logisticsName }}
          </template>
        </a-table-column>
        <!-- 运单号 -->
        <a-table-column
          key="waybillNm"
          data-index="waybillNm"
          align="center"
          width="18%"
        >
          <span slot="title">运单号</span>
          <template slot-scope="text, record">
            <span>
              {{ record.waybillNm }}
            </span>
          </template>
        </a-table-column>
        <!-- 商品名称 -->
        <a-table-column
          key="skuName"
          data-index="skuName"
          align="center"
          width="10%"
        >
          <span slot="title">商品名称</span>
          <template slot-scope="text, record">
            {{ record.skuName }}
          </template>
        </a-table-column>
        <!-- 退件SKU -->
        <a-table-column key="sku" data-index="sku" align="center" width="13%">
          <span slot="title">退件SKU</span>
          <template slot-scope="text, record">
            <span v-if="record.isCrs === '1'">
              {{ record.sku }}
            </span>
            <a-select
              v-if="record.isCrs === '0'"
              :style="
                record.sku === null || record.sku === ''
                  ? 'border: 1px solid #f00;border-radius:5px'
                  : 'border: 1px solid #ccc;border-radius:5px'
              "
              style="width: 100%"
              size="small"
              show-search
              v-model="record.sku"
              option-filter-prop="children"
              :filter-option="filterOption"
              @change="(value, option) => changeSku(value, option, record)"
              placeholder="请选择SKU"
            >
              <a-select-option
                :value="v.sku"
                v-for="v in RetreatStockArray"
                :key="v.id"
                :sku="v.sku"
                :name="v.skuName"
                :skuid="v.skuId"
                :productTag="v.productTag"
              >
                {{ v.sku }}
              </a-select-option>
            </a-select>
          </template>
        </a-table-column>
        <!-- 退件数量 -->
        <a-table-column
          key="productNumber"
          data-index="productNumber"
          align="center"
          width="10%"
        >
          <span slot="title">退件数量</span>
          <template slot-scope="text, record">
            <!-- <span v-if="record.productNumber">
              {{ record.productNumber }}
            </span> -->
            <span v-if="record.isCrs === '1'">
              {{ record.productNumber }}
            </span>
            <a-input-number
              v-if="record.isCrs === '0'"
              :style="
                record.productNumber === null || record.productNumber === ''
                  ? 'border: 1px solid #f00;border-radius:5px'
                  : 'border: 1px solid #ccc;border-radius:5px'
              "
              size="small"
              v-model="record.productNumber"
              :min="1"
            />
          </template>
        </a-table-column>
        <!-- 箱数 -->
        <a-table-column
          key="packingNumber"
          data-index="packingNumber"
          align="center"
          width="10%"
        >
          <span slot="title"> 箱数</span>
          <template slot-scope="text, record">
            <span v-if="record.isCrs === '1'">
              {{ record.packingNumber }}
            </span>
            <a-input-number
              v-if="record.isCrs === '0'"
              :style="
                record.packingNumber === null ||
                record.packingNumber === '' ||
                record.packingNumber === '0'
                  ? 'border: 1px solid #f00;border-radius:5px'
                  : 'border: 1px solid #ccc;border-radius:5px'
              "
              size="small"
              v-model="record.packingNumber"
            />
          </template>
        </a-table-column>
        <!-- 长宽高 -->
        <a-table-column
          key="lengthNumber"
          data-index="lengthNumber"
          align="center"
          width="20%"
        >
          <span slot="title">长*宽*高(cm)</span>
          <template slot-scope="text, record" class="box-sizes">
            <div v-if="record.isCrs === '1'">
              <span>
                {{ record.lengthNumber }}*{{ record.wideNumber }}*{{
                  record.highNumber
                }}
              </span>
            </div>
            <div v-if="record.isCrs === '0'">
              <a-input-number
                :style="
                  record.lengthNumber === null || record.lengthNumber === ''
                    ? 'border: 1px solid #f00;border-radius:5px'
                    : 'border: 1px solid #ccc;border-radius:5px'
                "
                size="small"
                style="width: 25%"
                v-model="record.lengthNumber"
                :min="1"
              />*
              <a-input-number
                :style="
                  record.wideNumber === null || record.wideNumber === ''
                    ? 'border: 1px solid #f00;border-radius:5px'
                    : 'border: 1px solid #ccc;border-radius:5px'
                "
                size="small"
                style="width: 25%"
                v-model="record.wideNumber"
                :min="1"
              />*
              <a-input-number
                :style="
                  record.highNumber === null || record.highNumber === ''
                    ? 'border: 1px solid #f00;border-radius:5px'
                    : 'border: 1px solid #ccc;border-radius:5px'
                "
                size="small"
                style="width: 25%"
                v-model="record.highNumber"
                :min="1"
              />
            </div>
          </template>
        </a-table-column>
        <!-- 重量 -->
        <a-table-column
          key="caratNumber"
          data-index="caratNumber"
          align="center"
          width="10%"
        >
          <span slot="title"> 重量(Kg)</span>
          <template slot-scope="text, record" class="box-sizes">
            <span v-if="record.isCrs === '1'">
              {{ record.caratNumber }}
            </span>
            <a-input-number
              v-if="record.isCrs === '0'"
              :style="
                record.caratNumber === null || record.caratNumber === ''
                  ? 'border: 1px solid #f00;border-radius:5px'
                  : 'border: 1px solid #ccc;border-radius:5px'
              "
              size="small"
              v-model="record.caratNumber"
              :min="1"
            />
          </template>
        </a-table-column>
        <!-- 处理方式 -->
        <a-table-column key="type" data-index="type" align="center" width="13%">
          <span slot="title"> 处理方式</span>
          <template slot-scope="text, record" class="box-sizes">
            <a-select
              v-if="record.isCrs === '0'"
              style="width: 100%"
              size="small"
              :style="
                record.type === null || record.type === ''
                  ? 'border: 1px solid #f00;border-radius:5px'
                  : 'border: 1px solid #ccc;border-radius:5px'
              "
              v-model="record.type"
              show-search
              option-filter-prop="children"
              :filter-option="filterOption"
              @change="
                (value, option) => handleChangeConduct(value, option, record)
              "
            >
              <a-select-option
                :value="item.key"
                v-for="item in treatmentArray"
                :key="item.key"
                :titles="item.title"
              >
                {{ item.title }}
              </a-select-option>
            </a-select>
            <span v-if="record.isCrs === '1'">
              {{ record.typeName }}
            </span>
          </template>
        </a-table-column>
        <!-- //操作 -->
        <a-table-column
          key="operation"
          data-index="operation"
          title="操作"
          width="200px"
          align="center"
        >
          <template slot-scope="text, record">
            <a
              v-if="record.isCrs === '0'"
              href="javascript:;"
              style="color: #2929e0; border-bottom: 1px solid #2929e0"
              @click="savaRowData(record)"
              >保存</a
            >
            <a-divider type="vertical" v-if="record.isCrs === '0'" />
            <a
              href="javascript:;"
              style="color: #2929e0; border-bottom: 1px solid #2929e0"
              @click="lookImg(record)"
              >查看图片</a
            >
          </template>
        </a-table-column>
      </a-table>
    </a-modal>

    <!-- //查看图片 -->
    <a-modal v-model="lookImgVisible" title="查看图片" width="50%">
      <template slot="footer">
        <a-button
          style="background: #d7d7d7; color: #fff; border: none"
          @click="lookImgVisible = false"
          >取消</a-button
        >
      </template>
      <span v-if="imgUrlArray.length >= 1">
        <img
          @click="lookImgs(item)"
          :src="item"
          :style="
            imgUrlArray.length <= 0
              ? ''
              : 'width: 200px; height: 200px; margin: 15px; cursor: pointer'
          "
          v-for="(item, i) in imgUrlArray"
          :key="i"
        />
      </span>
      <span v-else> 还未上传图片！ </span>
    </a-modal>

    <a-modal
      :visible="previewVisible"
      :footer="null"
      @cancel="previewVisible = false"
    >
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
    <!-- 服务项信息查看 -->
    <ServiceModalReap />
  </div>
</template>

<script>
import {
  by_retreat_pageBatchMageCrs,
  by_retreat_forecastInfoGet,
  by_retreat_batchforecastInfo,
  getRetreatStock,
  by_retreat_batchforSubmit
} from "@/apis/clientSide/ReturnsList/ReturnsList";
import { treeTagDictionary } from "@/apis/common";
import ServiceModalReap from "@/components/serviceModal/ServiceModalReap.vue";
import moment from "moment";
export default {
  components: {
    ServiceModalReap
  },
  props: ["tagKey", "port"],
  created() {
    this.getTabList();
    this.getTreatmentArray();
  },
  data() {
    return {
      // 退件SKU数组
      RetreatStockArray: [],
      // 处理方式数组
      treatmentArray: [],
      lookImgVisible: false,
      previewImage: "",
      previewVisible: false,
      imgUrlArray: [],
      //模态框表格数据
      tableListModal: [],
      tabInfoVisible: false,
      moment,
      total: 1,
      loading: false,
      tabData: [],
      searchData: {
        size: 10,
        current: 1,
        batchNo: null,
        tenantId: null,
        isNo: "3",
        batchState: this.tagKey
      },
      tableRowData: {},
      //   每一行状态
      tabRowState: ""
    };
  },
  methods: {
    //费用服务项信息查看
    costServiceInfo(record) {
      setTimeout(() => {
        this.$bus.$emit("reappearance", record, 7, record.id, false);
      }, 50);
    },
    //提交按钮
    onSubmitRow() {
      this.loading = true;
      this.passFalgs = true;
      this.tableListModal.forEach(item => {
        if (item.isCrs != "1") {
          this.passFalgs = false;
        }
      });
      if (this.passFalgs) {
        setTimeout(async () => {
          let { code } = await by_retreat_batchforSubmit(this.tableRowData.id);
          if (code === "10000") {
            this.loading = false;
            this.tabInfoVisible = false;
            this.getTabList();
          }
        }, 1000);
      } else {
        this.$message.error("请保存完毕后提交！");
        this.loading = false;
      }
    },
    //每一行保存
    async savaRowData(record) {
      if (
        record.packingNumber === null ||
        record.lengthNumber === null ||
        record.wideNumber === null ||
        record.highNumber === null ||
        record.caratNumber === null ||
        record.type === null ||
        record.packingNumber === "0"
      ) {
        this.$message.error("请检查必填项！");
        return false;
      }
      let { code } = await by_retreat_batchforecastInfo(record);
      if (code === "10000") {
        record.isCrs = "1";
      }
    },
    //图片放大
    lookImgs(url) {
      this.previewImage = url;
      this.previewVisible = true;
    },
    //处理方式
    handleChangeConduct(value, option, record) {
      //   console.log(value, option, record);
      record.typeName = option.data.attrs.titles;
    },
    //每一行数据详情表格
    async rowInfo(record) {
      this.tabRowState = record.state;
      this.tableRowData = record;
      let { code, responseBody } = await by_retreat_forecastInfoGet(
        record.batchNo
      );
      if (code === "200") {
        this.tableListModal = responseBody;
        this.tabInfoVisible = true;
      }
    },
    //查看图片
    lookImg(record) {
      this.imgUrlArray =
        record.file === "" || record.file === null
          ? []
          : record.file.split(",");
      this.lookImgVisible = true;
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    changeSku(vaulue, option, record) {
      record.skuName = option.data.attrs.name;
      record.skuId = option.data.attrs.skuid;
      record.sku = vaulue;
      record.productTag = option.data.attrs.productTag;
    },
    //重置按钮
    resetSearch() {
      let size = this.searchData.size;
      let current = this.searchData.current;
      this.searchData = {
        size,
        current,
        batchNo: null,
        tenantId: null,
        isNo: "3",
        waybillCount: this.tagKey === "56" ? "" : this.tagKey,
        batchState: this.tagKey === "1" ? "" : this.tagKey
      };
      this.getTabList();
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getTabList();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getTabList();
    },
    async getTabList() {
      this.spinning = true;
      let { code, responseBody } = await by_retreat_pageBatchMageCrs(
        this.searchData
      );
      if (code === "200") {
        this.total = responseBody.total * 1;
        this.tabData = responseBody.records;
        this.spinning = false;
      }
    },
    async getTreatmentArray() {
      let { code, responseBody } = await treeTagDictionary({
        tagType: 8
      });
      if (code === "200") {
        this.treatmentArray = responseBody;
      }

      let res = await getRetreatStock();
      if (res.code === "200") {
        this.RetreatStockArray = res.responseBody;
      }
    }
  },
  watch: {
    tagKey(value) {
      (this.searchData = {
        size: 10,
        current: 1,
        batchNo: null,
        tenantId: null,
        isNo: "3",
        waybillCount: value === "56" ? "" : value,
        batchState: value === "1" ? "" : value
      }),
        this.getTabList();
    }
  },
  computed: {
    columns() {
      return [
        {
          title: "批次号",
          dataIndex: "batchNo",
          align: "center",
          // scopedSlots: { customRender: "selfClassifyName" },
          width: "10%"
        },
        {
          title: "批次名称",
          dataIndex: "batchName",
          align: "center",
          // scopedSlots: { customRender: "selfClassifyName" },
          width: "10%"
        },
        {
          title: "仓库",
          dataIndex: "warehousingName",
          align: "center",
          width: "8%"
        },
        {
          title: "运单总数",
          dataIndex: "waybillCount",
          align: "center",
          width: "10%",
          scopedSlots: { customRender: "waybillCount" }
        },
        {
          title: "入库数量",
          dataIndex: "putCount",
          scopedSlots: { customRender: "putCount" },
          align: "center",
          width: "8%"
        },
        {
          title: "销毁数量",
          dataIndex: "destructionCount",
          scopedSlots: { customRender: "destructionCount" },
          align: "center",
          width: "8%"
        },
        {
          title: "退回数量",
          dataIndex: "backCount",
          scopedSlots: { customRender: "backCount" },
          align: "center",
          width: "8%"
        },
        {
          title: "状态",
          dataIndex: "batchState",
          scopedSlots: { customRender: "batchState" },
          align: "center",
          width: "12%"
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          scopedSlots: { customRender: "createTime" },
          align: "center",
          width: "10%"
        },
        {
          title: "自动销毁时间",
          dataIndex: "endTime",
          scopedSlots: { customRender: "endTime" },
          align: "center",
          width: "10%"
        },
        {
          title: "倒计时",
          dataIndex: "days",
          scopedSlots: { customRender: "days" },
          align: "center",
          width: "6%"
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
          align: "center",
          width: 220,
          fixed: "right"
        }
      ];
    }
  }
};
</script>

<style lang="less" scoped>
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
/deep/.ant-modal-footer {
  text-align: center !important;
  button {
    margin: 0 50px;
  }
}
</style>
